<template>
  <div class="box">
    <div class="bj">
      <div class="loginsrk">
          <div class="loginsrkbjt"></div>
          <div class="longsrkll">
            <div class="longsrkll-titie">教师登录</div>
              <Form ref="index" :model="index" :rules="ruleValidate" :label-width="20" >
                      <FormItem prop="zh">
                          <Input v-model="index.zh" placeholder="请输入账号">
                            <Icon type="ios-contact" slot="prefix" size="28" color="#2d8cf0"/>
                           </Input>
                      </FormItem>
                      <FormItem prop="mm">
                          <Input v-model="index.mm" placeholder="请输入密码">
                            <Icon type="md-lock" slot="prefix" size="28" color="#2d8cf0"/>
                          </Input>
                      </FormItem>
                      <FormItem>
                                  <CheckboxGroup v-model="index.jzw">
                                    <Checkbox label="记住我"><span class="jzw">记住我</span></Checkbox>
                                  </CheckboxGroup>
                      </FormItem>
                      <FormItem v-if="d">
                            <Button type="primary"><span>登录</span></Button>
                      </FormItem>
                      <FormItem v-else>
                            <Button type="primary" disabled><span>登录</span></Button>
                      </FormItem>
             </Form>
                    <div class="rjxys">
                      <CheckboxGroup v-model="index.tiaok">
                          <Checkbox label="同意" @click.native="ty"><span class="jzw">我已同意<a href="https://cdn.51bolema.com/html/agreement/index.html">《伯乐码用户服务协议》</a></span></Checkbox>
                      </CheckboxGroup>
                    </div>
                    <div class="tjianllq"><span>推荐浏览器：</span><a href="https://www.google.cn/chrome/"><Icon type="ios-basketball-outline" />&nbsp;&nbsp;谷歌</a>&nbsp;&nbsp;&nbsp;<a href="http://www.firefox.com.cn/"><Icon type="md-basketball" />&nbsp;&nbsp;火狐</a>
                    </div>
          </div>
      </div>
      <div class="copyright"><span>版权所有 © 2016-2020 上海践升信息科技有限公司&nbsp;&nbsp;<a href="http://www.beian.miit.gov.cn" target="_blank">沪ICP备19006290号-3</a></span>
      </div>
    </div>
  </div>
</template>
<script>
export default{
  data () {
    return {
      index: {
        zh: '',
        mm: '',
        jzw: ['记住我'],
        tiaok: ['同意']
      },
       d: true,
       ruleValidate: {
             zh: [{ required: true, message: '请输入账号', trigger: 'blur' }],
             mm: [{ required: true, message: '请输入密码', trigger: 'blur' }]
    }
    }
  },
  computed: {

  },
  components: {

  },
  methods: {
    ty() {
      if(this.index.tiaok.length==1) {
        this.d=false
      }else if(this.index.tiaok.length==0){
        this.d=true
      }
    }
  }
}
</script>
<style>
  @import url("../css/login.css");
</style>
